import React, { useState } from "react";
import { Form, Input, Button, Checkbox, Space, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import request from '../../static/requests';
import "./login.css";
export default function Login() {
  const history = useHistory();
  const onFinish = async (values) => {
    let { data } = await request("https://budbud.top/background/blogUser/info", {
      method: "POST",
      data: {
        values: values
      },
    });
    if (data.code == 0) {
      console.log(data);
      message.success(data.msg)
      sessionStorage.setItem("username", data.data[0].username)
      history.push("/home")
    } else {
      message.error(data.msg)
    }
  }
  return (
    <div className="wrapper">
      <Form
        name="normal_login"
        className="login-form "
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
      >
        <Space className="container">
          <div
            className="form"
            style={{
              display: "flex",
              justifyContent: "center",
              flexDirection: "column",
              alignItems: "center",
              width: "100%",
            }}
          >
            <h1>Welcome</h1>
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: "Please input your Username!",
                },
              ]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="Username"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: "Please input your Password!",
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                登录
            </Button>
            </Form.Item>
          </div>
        </Space>
      </Form>

    </div>
  );
}
